<template>
    <view class="con-box">
		<uni-popup ref="savePopup" type="bottom">
			<view class="con">
				<view class="close" @click="cancel()"> </view>
				<view class="con-img-box">
					<image class="con-img" :style="'width: ' + width + 'rpx;height: ' + height + 'rpx;'" 
					:src="sharePath" mode="widthFix"></image>
				</view>
				<view class="share-tips">保存图片，叫伙伴们来参与吧</view>
				
				<view class="con-button-box">
					<button @tap="handleSavePhoto()" class="saveBut" type="default">保存图片</button>
				</view>
			</view>
		</uni-popup>
		
		
        <painter style="position: absolute; top: -9999rpx;" :palette="imgDraw" @imgOK="onImgOK" @imgErr="onImgErr"> </painter>
    </view>
</template>

<script>
export default {
    name: 'share-box',
    data() {
        return {
			imgDraw: {}, //绘制图片的大对象
			sharePath: '', //生成的分享图
        }
    },
    props: {
		/* 图片宽度，单位rpx */
		width: {
			type: [Number,String],
			default: function() {
				return 375;
			}
		},
		/* 图片高度，单位rpx */
		height: {
			type: [Number,String],
			default: function() {
				return 872;
			}
		},
		userName: {
			type: String,
			default: function() {
				return '';
			}
		},
		title:{
			type: String,
			default: function() {
				return '';
			}
		},
		userPortrait:{
			type: String,
			default: function() {
				return '';
			}
		},
		reduction_1:{
			type: String,
			default: function() {
				return '';
			}
		},
		reduction_2:{
			type: String,
			default: function() {
				return '';
			}
		},
		reduction_3:{
			type: String,
			default: function() {
				return '';
			}
		},
		reduction_4:{
			type: String,
			default: function() {
				return '超圳商圈选购';
			}
		},
		codeUrl: {
			type: String,
			default: function() {
				return '';
			}
		}
    },
    methods: {
		/* 关闭弹框 */
		cancel (){
			this.$refs.savePopup.close();
		},
		open() {
			if (this.sharePath) { //如果已经绘制过了本地保存有图片不需要重新绘制
				this.$refs.savePopup.open();
				return;
			}
			uni.showLoading({title: '生成中'});
			
			this.imgDraw = {
			  width: '750rpx',
			  height: '1334rpx',
			  background: 'https://hdsq.aoorange.cn/attachment/xcx/store/haibaobg.png',
			  views: [
				{
				  type: 'image',
				  url: 'https://hdsq.aoorange.cn/attachment/xcx/store/haibaologo.png',
				  css: {top: '32rpx',left: '30rpx',right: '32rpx',width: '688rpx',height: '420rpx',borderRadius: '16rpx'},
				},
				{
				  type: 'image',
				  url: this.userPortrait,
				  css: {top: '404rpx',left: '328rpx',width: '96rpx',height: '96rpx',borderWidth: '6rpx',borderColor: '#FFF',borderRadius: '96rpx'}
				},
				{
				  type: 'text',
				  text: this.userName,
				  css: {top: '532rpx',fontSize: '28rpx',left: '375rpx',align: 'center',color: '#333333'}
				},
				{
				  type: 'text',
				  text: this.title,
				  css: {top: '576rpx',left: '375rpx',align: 'center',fontSize: '28rpx',color: '#33333'}
				},
				{
				  type: 'text',
				  text: this.reduction_1,
				  css: {top: '634rpx',left: '375rpx',maxLines: 1,align: 'center',fontWeight: '400',fontSize: '28rpx',color: '#333333'}
				},
				{
				  type: 'text',
				  text: this.reduction_2,
				  css: {top: '678rpx',left: '375rpx',maxLines: 1,align: 'center',fontWeight: '400',fontSize: '28rpx',color: '#333333'}
				},
				{
				  type: 'text',
				  text: this.reduction_3,
				  css: {top: '722rpx',left: '375rpx',maxLines: 1,align: 'center',fontWeight: '400',fontSize: '28rpx',color: '#333333'}
				},
				{
				  type: 'text',
				  text: `长按二维码前往`,
				  css: {width:'220rpx', top: '894rpx',left: '100rpx',maxLines: 1,align: 'left',fontWeight: '400',fontSize: '28rpx',color: '#6c6c6c'}
				},
				{
				  type: 'text',
				  text: this.reduction_4,
				  css: {width:'220rpx', top: '948rpx',left: '100rpx',maxLines: 1,align: 'left',fontWeight: '400',fontSize: '28rpx',color: '#6c6c6c'}
				},
				{
				  type: 'image',
				  url: this.codeUrl,
				  css: {top: '824rpx',left: '460rpx',width: '220rpx',height: '220rpx'}
				}
			  ]
			}
		},

		onImgErr(e) {
		  uni.hideLoading()
		  uni.showToast({title: '生成分享图失败，请刷新页面重试'})
		},
		onImgOK(e) {
			uni.hideLoading();
			this.sharePath = e.detail.path,
			this.$refs.savePopup.open();
		},
		// 保存图片
		handleSavePhoto() {
			let self = this;
			uni.getSetting({
				success(res) {
					if (!res.authSetting['scope.writePhotosAlbum']) {
						uni.authorize({
							scope: 'scope.writePhotosAlbum',
							success() {
								//这里是用户同意授权后的回调
								self.saveImgToLocal();
							},
							fail() {//这里是用户拒绝授权后的回调
								self.openSettingBtnHidden=false
								uni.showToast({title: "您已拒接授权相册权限，无法保存图片",icon: "none"});
							}
						})
					} else {//用户已经授权过了
						self.saveImgToLocal();
					}
				}
			})
		},
		saveImgToLocal() {
			var self = this;
			uni.showLoading({title: '正在保存...',mask: true});
			uni.downloadFile({
				url: self.sharePath,
				success: (res) =>{
					if (res.statusCode === 200){
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: function() {
								uni.hideLoading();
								uni.showToast({title: "保存成功",icon: "none"});
								setTimeout(() => {
									self.$refs.savePopup.close();
								}, 300)
							},
							fail: function() {
								// uni.showToast({title: "保存失败",icon: "none"});
								uni.getSetting({
									success: res => {
									  let authSetting = res.authSetting
									  if (!authSetting['scope.writePhotosAlbum']) {
										uni.showModal({title: '提示',content: '您未开启保存图片到相册的权限，请点击确定去开启权限！',success(res) {if (res.confirm) {uni.openSetting();}}});
									  }
									}
								})
								setTimeout(() => {uni.hideLoading();self.cancel();}, 300);
							}
						}, self);
					}
				},
				fail:(err)=>{
					uni.getSetting({
						success: res => {
						  let authSetting = res.authSetting
						  if (!authSetting['scope.writePhotosAlbum']) {
							uni.showModal({title: '提示',content: '您未开启保存图片到相册的权限，请点击确定去开启权限！',success(res) {if (res.confirm) {uni.openSetting();}}});
						  }
						}
					},self)
					setTimeout(() => {uni.hideLoading();self.cancel();}, 300);
				}
			},self);
		}
	}
}
</script>

<style lang="scss" scoped>
	.con-box{width: 100vw;}
	
	.con{padding: 30rpx 30rpx;position: relative;background-color: #FFFFFF;border-radius: 20rpx 20rpx 0 0;}
    .close {width: 36rpx;height: 36rpx;overflow: hidden;position: absolute;right: 30rpx;top: 30rpx;}
    .close::after {transform: rotate(-45deg);}
    .close::before {transform: rotate(45deg);}
    .close::before,.close::after {content: '';position: absolute;height: 3rpx;width: 100%;top: 50%;left: 0;margin-top: -2rpx;background: #9C9C9C;}
    
	
	.con-img-box{padding: 20rpx 0;display: flex;justify-content: center;align-items: center;}
	// .con-img{width: 100%;height: 100%;}
	.con-button-box{padding: 40rpx 0;display: flex;justify-content: center;align-items: center;}
	.saveBut{width: 690rpx;height: 88rpx;background-color: #FFAF02;color: #FFFFFF;font-size: 32rpx;line-height: 88rpx;}
	
	
	
	
    .share-image {width: 420rpx;margin: 66rpx auto 0;display: block;border-radius: 16rpx;box-shadow: 0px 4rpx 8px 0px rgba(0, 0, 0, 0.1);}

    .share-tips {width: 100%;text-align: center;color: #3C3C3C;font-size: 28rpx;}

</style>
